<template>
    <a-typography>
        <a-typography-title :level="3">
            {{item.title || item.url}}
        </a-typography-title>
        <a-typography-title :level="3">
            <iconView class="TagStyle" :colorType="item.type" />
            <span> &nbsp; {{item.url}} &nbsp; </span>
            <a-button style="float:right" type="primary" @click="SendEvent">
                <template #icon>
                    <SyncOutlined spin v-if="ButtonLoading" />
                </template>
                {{!ButtonLoading ? 'Send' : 'Cancel'}}
            </a-button>
        </a-typography-title>
    </a-typography>
    <a-tabs v-model:activeKey="activeKey" class="ContentTab">
        <a-tab-pane key="query" tab="url 参数" v-if="ContentData.item.query">
            <ParamView :activeKey="activeKey" :ContentData="ContentData" ref="paramRef" :forceRender="true" />
        </a-tab-pane>
        <a-tab-pane key="body" tab="Body 参数" v-if="ContentData.item.body" :forceRender="true">
            <BodyView :activeKey="activeKey" :ContentData="ContentData" ref="bodyRef" />
        </a-tab-pane>
        <a-tab-pane key="header" tab="header 参数" :forceRender="true">
            <HeaderView :activeKey="activeKey" ref="headerRef" />
        </a-tab-pane>
    </a-tabs>

    <a-tabs v-model:activeKey="ResponseKey" class="ContentTab">
        <a-tab-pane key="result" tab="响应结果" :forceRender="true">
            <ResponseView :activeKey="ResponseKey" :ContentData="ContentData" ref="responseRef" />
        </a-tab-pane>
        <a-tab-pane key="response" tab="请求详情" :forceRender="true">
            <ResponseMessage ref="messageRef" />
        </a-tab-pane>
    </a-tabs>

</template>
<script setup>
import { ref, computed, nextTick } from 'vue'
import iconView from '../iconTag.vue'
import ParamView from './paramView.vue'
import BodyView from './bodyView.vue'
import HeaderView from './headerView.vue'
import ResponseView from './responseView.vue'
import ResponseMessage from './responseMessage.vue'
import { SyncOutlined } from '@ant-design/icons-vue';
import axios from 'axios'
import { guid, uuid } from '../../libs/utils'

import { useStore } from '../../libs/store'
const store = useStore();
const props = defineProps(['item']);
var ContentData = store.getItemData(props.item);

var defaultActiveKey = ContentData.item.query ? 'query' : (ContentData.item.body ? 'body' : 'header');
const activeKey = ref(defaultActiveKey);
const ResponseKey = ref('result');
const ButtonLoading = ref(false);

const paramRef = ref(null);
const bodyRef = ref(null);
const headerRef = ref(null);
const responseRef = ref(null);
const messageRef = ref(null);



const formatCode = (str) => new Function('guid', 'uuid', `return ${str}`)(guid, uuid)

const SendEvent = () => {
    if (!ButtonLoading.value) {
        nextTick(() => {
            ButtonLoading.value = true;
            var reqData = {
                method: props.item.type,
                url: store.IP + props.item.url,
                params: ContentData.item.query && formatCode(paramRef.value.getValue()),
                data: ContentData.item.body && formatCode(bodyRef.value.getValue()),
                headers: formatCode(headerRef.value.getValue()),
            };
            if (ContentData.item.query) {
                var _url = reqData.url;
                var _params = JSON.parse(JSON.stringify(reqData.params));
                _url = _url.replace(/\{\w+\}/g, function (i) {
                    var _src = i.replace('{', '').replace('}', '');
                    if (_params.hasOwnProperty(_src)) {
                        var _value = _params[_src];
                        delete _params[_src];
                        return _value;
                    }
                });
                reqData.url = _url;
                reqData.params = _params;
            };
            var _headers = JSON.parse(JSON.stringify(store.headers));

            reqData.headers = { ...reqData.headers, ..._headers };

            messageRef.value.clear();
            const instance = axios.create();
            instance(reqData).then(res => {
                ButtonLoading.value = false;
                responseRef.value.setValue(res.data);
                messageRef.value.setValue(res);
            }).catch(res => {
                ButtonLoading.value = false;
                messageRef.value.setValue(res.response);
                ResponseKey.value = 'response';
            });
        })
    }
}












</script>

<style lang="less" scoped>

.TagStyle {
    vertical-align: middle;
}

.ContentTab {
    :deep(.ant-tabs-nav) {
        padding-left: 10px;
        user-select: none;
        border-bottom: 1px solid #CCC;
        height: 41px;
        background-color: transparent;
        border-left: none;
        margin-bottom: 5px;
    }
}


:deep(.ant-tabs-content) {
    height: auto !important;
    overflow-y: hidden !important;
}
</style>